import React, {useState} from "react";
import {UserOutlined} from "@ant-design/icons";
import {createStyles} from "antd-style";
import {useUserInfoStore} from "@/store/BaseStore.ts";
import {Avatar, Button} from "antd";
import UserLoginModal from "@/components/UserLoginModal.tsx";
import {useNavigate} from "react-router-dom";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            height: 100px;
            width: 100px;
            display: grid;
            place-items: center;

            .avatar {
                transition: all .2s ease-in-out;
            }

            :hover {
                .avatar {
                    transform: scale(1.5);
                    cursor: pointer;
                }
            }
        `
    }
})

const UserAvatar: React.FC = () => {
    const styles = useStyles().styles;
    const userInfo = useUserInfoStore(state => state.userInfo);
    const [loginModalOpen, setLoginModalOpen] = useState(false)
    const navigate = useNavigate();

    const toUserPage = () => {
        navigate('/user')
    }

    const showLoginModal = () => {
        setLoginModalOpen(true)
    }

    return (
        <>
            <div className={styles.container}
                 onClick={() => {
                     if (userInfo == null) {
                         showLoginModal()
                     } else {
                         toUserPage()
                     }
                 }}
            >
                {
                    userInfo ?
                        userInfo.avatar ?
                            <Avatar src={userInfo.avatar}
                                    size="large"
                                    shape="square"
                                    className="avatar"
                            /> :
                            <UserOutlined
                                className="avatar"
                            /> :
                        <Button>请登录</Button>
                }
            </div>
            <UserLoginModal open={loginModalOpen} setOpen={setLoginModalOpen}/>
        </>
    )
}

export default UserAvatar